/*
 * @Author: mayijun
 * @Date: 2022-05-14 15:33:03
 * @LastEditors: mayijun
 * @LastEditTime: 2022-06-10 09:28:47
 */
//自定义拖拽改变大小指令，限制为上下拖动改变
export const drawerDrag = (app: any) => {
  app.directive('drawerDrag', {
    mounted(el: any, binding: any, vnode: any, oldVnode: any) {

      //元素默认高度
      //const clientH = el.clientHeight;
      //在元素上加入拖拽图标
      const img = document.getElementById("lineId");

      //下半部的div
      const downDiv = document.querySelector(".select-dimension");
      console.log("拖拽图标");

      if (!img) {
        return false;
      }

      img.onmousedown = (e) => {

        const elH = el.clientHeight;
        const elPh = el.parentNode.clientHeight;
        const clientY = e.clientY;

        document.onmousemove = function (e) {
          e.preventDefault();
          let offectHeight = elH - (clientY - e.clientY) - 8;
          let offectMove = clientY - e.clientY;
          if(
            (offectMove > 0 && offectHeight > 50) || 
            (offectMove < 0 && offectHeight < elPh - 50) 
          ){
            //拖拽计算 图标的偏移8px
            el.style.flex = '0 0 ' + offectHeight / elPh * 100 + '%';
            if (downDiv) {
              downDiv.setAttribute('style', 'flex: 0 0 ' + (100 - offectHeight / elPh * 100 - 1.5) + '%')
            }
            img.style.top = offectHeight / elPh * 100 + '%';
          }

        }
        // 拉伸结束
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  })
}
